<template>
  <div>
    <!-- 首页底部导航栏的定位 -->
    <div>
      <!-- 顶部钓鱼指南;我的地点,天气; -->
      <div class="top">
        <!-- 针对天气.if判断钓鱼 -->
        <div class="left">
          <div class="score">29分</div>
          <div class="tips">不易捕鱼</div>
        </div>
        <div class="right">
          <div>{{address}}</div>
          <div>天气质量:4℃</div>
          <div>西南风 2级</div>
        </div>
        <div>天气质量{{tq}}</div>
      </div>
      <!-- 宫格; -->
      <div>
        <van-grid :column-num="5">
          <van-grid-item v-for="value in 5" :key="value" icon="photo-o" text="文字" />
        </van-grid>
      </div>
      <!--  导航条;-->
      <div>
        <ul class="ul">
          <li class="li">最新</li>
          <li class="li">精华</li>
          <li class="li">灌水</li>
        </ul>
      </div>
      <!--  广告; -->
      <div></div>
      <!--论坛 -->
    </div>
    <!-- 地图 -->
    <div id="container"></div>
    <!-- 获取当前地理位置 -->
    <div class="pos">{{pos}}</div>
    <div class="pos">{{err}}</div>
    <div>{{address}}</div>
    <div>{{a}}</div>
    <div>{{weather}}</div>
    <!-- 底部导航栏 -->
    <van-tabbar class="nav-tar" route>
      <van-tabbar-item to="/" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/add" icon="location-o">定位</van-tabbar-item>
      <van-tabbar-item to="/shop" icon="cart-circle-o">商城</van-tabbar-item>
      <van-tabbar-item to="/forum" icon="friends-o">论坛</van-tabbar-item>
      <van-tabbar-item to="/self" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      tq: '',
      pos: '',
      err: '',
      address: '',
      a:'',
      weather:''
    };
  },
  mounted() {
    //获取用户位置，经纬度
    navigator.geolocation.getCurrentPosition(
      // 成功回调函数
      position => {
        console.log('获取位置成功', position);
        this.pos = {
          longitude: position.coords.longitude,
          latitude: position.coords.latitude
        };
        const map = new AMap.Map('container', {
          zoom: 12, //级别
          center: [position.coords.longitude, position.coords.latitude], //中心点坐标
          viewMode: '3D' //使用3D视图
        });
        // 逆向地理编码
        AMap.plugin('AMap.Geocoder', () => {
          var geocoder = new AMap.Geocoder({
            // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
            city: '010'
          });

          var lnglat = [position.coords.longitude, position.coords.latitude];

          geocoder.getAddress(lnglat, (status, result) => {
            if (status === 'complete' && result.info === 'OK') {
              console.log('result的打印结果', result);
              this.address = result.regeocode.formattedAddress;
              // result为对应的地理位置详细信息
              console.log('address的打印结果', this.address);

              AMap.plugin('AMap.Weather', () => {
                //创建天气查询实例
                var weather = new AMap.Weather();
                //执行实时天气信息查询
                  console.log('address的打印结果', this.address);
                  this.a=this.address.slice(0,2);
                weather.getLive(a, (err, data) => {
                  // console.log('address的打印结果', this.address);
                  console.log(data);
                  this.weather = data
                });
              });
            }
          });
        });
      },
      // 失败回调函数
      error => {
        console.log('获取位置失败', error);
        this.err = error.message;
      }
    );
  }
};
</script>
<style scoped>
#container {
  width: 37.5rem;
  height: 20rem;
}
.top {
  width: 37.5;
  height: 11rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: cornflowerblue;
}
.score {
  color: white;
  font-size: 3rem;
}
.tips {
  color: white;
}
.left {
  width: 8rem;
  height: 8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid blue;
  border-radius: 50%;
}
.ul {
  display: flex;
  border: 1px solid grey;
  flex-direction: row;
}
.li {
  margin: 0 2rem;
}
</style>